<template>
  <!-- <view class="popup-mask" @tap="handleMaskClick"> -->
  <view class="popup-container" @tap.stop>
    <view class="popup-header">支付确认</view>
    <view class="popup-content">
      <view class="amount-row">
        <view class="amount-label">支付金额</view>
        <view class="amount-value">
          <text class="price">¥{{ totalPrice }}</text>
        </view>
      </view>

      <!-- <view class="balance-row">
            <view class="balance-label">账户余额</view>
            <view class="balance-value">¥{{ info.balanceA }}</view>
          </view> -->

      <!-- <view class="input-group">
            <view class="input-label">如需找人代付，请输入代付人推荐码</view>
            <input
              v-model="payerName"
              type="text"
              class="input-field"
              placeholder="请输入代付人推荐码"
              @input="handleInput"
            />
          </view> -->
    </view>

    <view class="popup-content">
      <view class="ss-label">订单详情</view>
      <view class="product-list">
        <view class="product-row" v-for="item in goodsData">
          <view class="">
            <view class="p-title">{{ item.goodsName }}</view>
            <view class="p-info"
              >{{ item.specificationsName }} x {{ item.quantity }}</view
            >
          </view>
          <text class="p-price">￥{{ item.amount }}</text>
        </view>
      </view>
    </view>

    <!-- <view class="pic-box">
        <image :src="pic" mode="widthFix" class="pic" />
      </view> -->

    <view class="button-group">
      <nut-button
        class="button button-cancel"
        @tap="handleCancel"
        type="default"
        >取消</nut-button
      >
      <nut-button
        class="button button-confirm"
        @tap="handleConfirm"
        type="primary"
      >
        确定核销
      </nut-button>
    </view>
  </view>
  <!-- </view> -->
</template>

<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { onMounted, ref, computed } from "vue";
import { store } from "@/store/index";
import http from "@/utils/http";

// 直接解构store中的响应式状态
const { info, user } = store.storeState;
const params = Taro.getCurrentInstance().router?.params;
//   const pic = decodeURIComponent(params.pic);

const goodsData = ref([]);

const totalPrice = computed(() => {
  return goodsData.value
    .reduce((sum, item) => {
      return sum + item.amount;
    }, 0)
    .toFixed(2);
});

// const props = withDefaults(
//   defineProps<{
//     visible: boolean;
//     orderId: any;
//   }>(),
//   {
//     visible: false,
//     orderId: null,
//   }
// );
// const goods ref([])
onMounted(() => {
  http
    .postQuery(`/api/userOrder/getOrderDetail`, { orderId: params.id })
    .then((res) => {
      goodsData.value = res.data.map((i) => i.columns);
    });
});

// const emit = defineEmits<{
//   // (e: "update:visible", value: boolean): void;
//   (e: "cancel"): void;
//   (e: "confirm", param: any): void;
// }>();

const payerName = ref("");

const handleMaskClick = () => {
  // emit("update:visible", false);
  // emit("cancel");
};

const handleCancel = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

const handleConfirm = () => {
  http
    .postQuery(`/api/merchant/confirmVerification`, {
      orderId: params.id,
    })
    .then((res) => {
      if (res.code == 0) {
        Taro.navigateBack({
          title: "核销成功",
          icon: "success",
        });

        Taro.navigateBack({
          delta: 1,
        });
      } else {
        Taro.showToast({
          title: res.data,
          icon: "error",
        });
      }
    });
};

const handleInput = (e) => {
  payerName.value = e.detail.value;
};
</script>

<style lang="scss">
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-container {
  width: 100%;
  background-color: #fff;
  // border-radius: 24rpx;
  // overflow: hidden;
  // position: relative;
  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.popup-header {
  padding: 60rpx 48rpx 40rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  border-bottom: 2rpx solid #f5f5f5;
}

.popup-content {
  padding: 20rpx 48rpx;
}

.amount-row,
.balance-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.amount-label,
.balance-label {
  font-size: 32rpx;
  color: #666;
}

.amount-value,
.balance-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.amount-value .price {
  color: #ff7631;
  font-size: 40rpx;
  font-weight: bold;
}

.input-group {
  margin-bottom: 60rpx;
}

.input-label {
  font-size: 24rpx;
  color: #3c8a3f;
  margin-bottom: 20rpx;
  display: block;
}

.input-field {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  color: #333;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

.input-field:focus {
  outline: none;
  border-color: #ff7631;
}

.button-group {
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30rpx;
}

.ss-label {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}
.product-list {
  overflow-y: auto;
  max-height: 30vh;
}
.product-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  .p-title {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  .p-info {
    font-size: 24rpx;
    color: #666;
  }
  .p-price {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
}

.pic-box {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx auto;
  .pic {
    background: #eee;
    width: 400rpx;
    height: 400rpx;
  }
}
</style>
